<template>
  <div class="merchantsList">
    <div class="top">
      <div class="time pad">
        <span class="label">行业类型：</span>
        <el-cascader v-model="filter.shopTypeId" :options="typeLs" :show-all-levels="false" @change="handleChange">
        </el-cascader>
      </div>
      <div class="time pad">
        <span class="label">管辖区域：</span>
        <el-select v-model="filter.areaId" filterable placeholder="请选择">
          <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="btn pad">
        <el-button @click="setReset">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <!-- <export-excel-button
          title="商家列表"
          action="/merchant/v1/userDetail/export"
          :params="ExportParams"
        /> -->
        <el-button type="primary" @click="addCardlimit">新增发卡规模</el-button>
        <div class="tip">
          注： 绿色代表低风险， 黄色代表 中风险， 红色 代表高风险 （ 每行的颜色
          根据 商家信用风险 那列的值来决定）
        </div>
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:dataone="{ scope }">
          <div class="green" v-if="scope.row.creditRisks == '低'">
            {{ scope.row.childName }}
          </div>
          <div class="red" v-if="scope.row.creditRisks == '高'">
            {{ scope.row.childName }}
          </div>
          <div class="yellow" v-if="scope.row.creditRisks == '中'">
            {{ scope.row.childName }}
          </div>
        </template>
        <template v-slot:datatwo="{ scope }">
          <div class="green" v-if="scope.row.safetyFactor == '低'">低</div>
          <div class="red" v-if="scope.row.safetyFactor == '高'">高</div>
          <div class="yellow" v-if="scope.row.safetyFactor == '中'">中</div>
        </template>
        <template v-slot:datathree="{ scope }">
          <div class="green" v-if="scope.row.creditRisks == '低'">低</div>
          <div class="red" v-if="scope.row.creditRisks == '高'">高</div>
          <div class="yellow" v-if="scope.row.creditRisks == '中'">中</div>
        </template>
        <template v-slot:datafour="{ scope }">
          <div class="green" v-if="scope.row.creditRisks == '低'">
            注册资金 {{ scope.row.enterpriseMerchantLimit }}%
          </div>
          <div class="red" v-if="scope.row.creditRisks == '高'">
            注册资金 {{ scope.row.enterpriseMerchantLimit }}%
          </div>
          <div class="yellow" v-if="scope.row.creditRisks == '中'">
            注册资金 {{ scope.row.enterpriseMerchantLimit }}%
          </div>
        </template>
        <template v-slot:datafive="{ scope }">
          <div class="green" v-if="scope.row.creditRisks == '低'">
            {{ scope.row.personMerchantLimit }}万
          </div>
          <div class="red" v-if="scope.row.creditRisks == '高'">
            {{ scope.row.personMerchantLimit }}万
          </div>
          <div class="yellow" v-if="scope.row.creditRisks == '中'">
            {{ scope.row.personMerchantLimit }}万
          </div>
        </template>
        <template v-slot:datasix="{ scope }">
          <div>记名：{{ scope.row.enterpriseMerchantRegisteredLimit }}</div>
          <div>
            不记名：{{ scope.row.enterpriseMerchantNotRegisteredLimit }}
          </div>
        </template>
        <template v-slot:dataseven="{ scope }">
          <div>记名：{{ scope.row.personMerchantRegisteredLimit }}</div>
          <div>不记名：{{ scope.row.personMerchantNotRegisteredLimit }}</div>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="getDetail(scope.row.id)" size="small">修改规模/限额</el-button>
        </template>
      </ex-table>
    </div>
    <el-dialog :title="titletxt" :visible.sync="centerDialogVisible" width="60%" center>
      <div v-loading="loading2">
        <div class="dia_detail">
          <div class="dia_detail_l">管辖区域：</div>
          <div class="dia_detail_r">
            <el-select v-model="formInline.areaId" filterable placeholder="请选择" @change="areaIdChange">
              <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="dia_detail">
          <div class="dia_detail_l">行业：</div>
          <div class="dia_detail_r">
            <el-select placeholder="请选择" v-model="typeLs2value" @change="parentChange">
              <el-option v-for="item in typeLs2" :key="item.id" :label="item.value" :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="dia_detail">
          <div class="dia_detail_l">子行业：</div>
          <div class="dia_detail_r">
            <el-select placeholder="请选择" multiple v-model="childShopType" @change="parentChange2">
              <el-option v-for="item in typeLs3" :key="item.id" :label="item.value" :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="dia_detail">
          <div class="dia_detail_l">融安e信安全系数：</div>
          <div class="dia_detail_r">
            <el-select placeholder="请选择" v-model="formInline.safetyFactor">
              <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="dia_detail">
          <div class="dia_detail_l">商家信用风险：</div>
          <div class="dia_detail_r">
            <el-select placeholder="请选择" v-model="formInline.creditRisks">
              <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="dia_detail">
          <div class="dia_detail_l">企业法人最大发卡规模：</div>
          <div class="dia_detail_r">
            <span style="width: 100px">注册资金</span>
            <el-input v-model="formInline.enterpriseMerchantLimit" placeholder="请输入内容" @blur="BlurText($event)"
              @input="changeInput"></el-input>
            <span style="margin-left: 10px">%</span>
          </div>
        </div>
        <div class="dia_detail">
          <div class="dia_detail_l">个体商户最大发卡规模：</div>
          <div class="dia_detail_r">
            <el-input v-model="formInline.personMerchantLimit" placeholder="请输入内容"></el-input>
            <span style="margin-left: 10px; width: 100px">万元</span>
          </div>
        </div>
        <div class="dia_detail">
          <div class="dia_detail_l">企业法人单张卡限额：</div>
          <div class="dia_detail_r">
            <span style="width: 60px">记名</span>
            <el-input v-model="formInline.enterpriseMerchantRegisteredLimit" placeholder="请输入内容"></el-input>
            <span style="margin-left: 10px">元</span>
          </div>
          <div class="dia_detail_r" style="margin-left: 30px">
            <span style="width: 80px">不记名</span>
            <el-input v-model="formInline.enterpriseMerchantNotRegisteredLimit" placeholder="请输入内容"></el-input>
            <span style="margin-left: 10px">元</span>
          </div>
        </div>
        <div class="dia_detail">
          <div class="dia_detail_l">个体商户单张卡限额：</div>
          <div class="dia_detail_r">
            <span style="width: 60px">记名</span>
            <el-input v-model="formInline.personMerchantRegisteredLimit" placeholder="请输入内容"></el-input>
            <span style="margin-left: 10px">元</span>
          </div>
          <div class="dia_detail_r" style="margin-left: 30px">
            <span style="width: 80px">不记名</span>
            <el-input v-model="formInline.personMerchantNotRegisteredLimit" placeholder="请输入内容"></el-input>
            <span style="margin-left: 10px">元</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="mideSumit">保 存</el-button>
      </span>
    </el-dialog>
    <detail-dialog v-if="detailDialog" :id="id" :visible.sync="detailDialog" @success="_handleSuccess" />
    <detail-dialog-report v-if="detailDialog2" :id="id" :visible.sync="detailDialog2" @success="_handleSuccess" />
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  // components
  import DetailDialog from "./components/merchantsList/DetailDialog";
  import DetailDialogReport from "./components/merchantsList/DetailDialogReport";
  import ExportExcelButton from "@/components/ExportExcelButton/index"; 
  // api
  import {
    userAreaSelect
  } from "@/api/common";
  import {
    limitshopTypeList,
    cardlimitLs,
    shopTypeList,
    addCardlimit,
    cardlimitDetail,
    updateCardlimit,
  } from "@/api/merchants"; 

  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "NewIncreaseVerify",
    components: {
      DetailDialog,
      ExportExcelButton,
      DetailDialogReport,
    },
    mixins: [handlePageMixin],
    computed: {
      ...mapState({
        statusList: function (state) {
          return state.common["merchant_apply_status"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
        industryStatusType: function (state) {
          return state.common["industry_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
        },
      }),
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        return params;
      },
    },
    data() {
      return {
        loading2: false,
        orType: 1, //1:新增    2：修改
        centerDialogVisible: false,
        value: [],
        loading: false,
        detailDialog2: false,
        titletxt: "",
        formInline: {
          parentId: "", //行业父类型id
          parentName: "", //行业父类型名称
          safetyFactor: "", //安全系数
          creditRisks: "", //信用风险
          enterpriseMerchantLimit: "", //企业商户发卡限制
          personMerchantLimit: "", //个人商户发卡限制
          enterpriseMerchantRegisteredLimit: "", //企业商户发记名卡限制
          enterpriseMerchantNotRegisteredLimit: "", //企业商户发非记名卡限制
          personMerchantRegisteredLimit: "", //个人商户发记名卡限制
          personMerchantNotRegisteredLimit: "", //个人商户发非记名卡限制
          areaId:'',//管辖区域
        },
        childShopType: [], //子店铺行业类型数组
        tableColumn: [{
            prop: "areaName",
            label: "管辖区域"
          },
          {
            prop: "parentName",
            label: "行业"
          },
          {
            label: "子行业",
            slot: true,
            slotName: "dataone"
          },
          {
            label: "融安e信安全系数",
            slot: true,
            slotName: "datatwo"
          },
          {
            label: "商家信用风险",
            slot: true,
            slotName: "datathree"
          },
          {
            label: "企业法人最大发卡规模",
            slot: true,
            slotName: "datafour"
          },
          {
            label: "个体商户最大发卡规模",
            slot: true,
            slotName: "datafive"
          },
          {
            label: "企业法人单张卡限额",
            slot: true,
            slotName: "datasix"
          },
          {
            label: "个体商户单张卡限额",
            slot: true,
            slotName: "dataseven"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "180",
            fixed: "right",
          },
        ],
        filter: {
          shopTypeId: "",
          areaId: '', ////区域id admin必传
        },
        tableData: [],
        currentNavtab: 0,
        detailDialog: false,
        normal: "",
        blacklist: "",
        isShow: true,
        AccountList: [], //关联资金账户查询列表
        // industryStatusType: [],//行业字典
        typeLs: [],
        typeLs2: [],
        typeLs3: [],
        typeLs2value: {},
        type3value: [],
        parentId: "",
        limitid: "", //发卡限制id（新增不传，需改的时候才传）
        options: [{
            value: "0",
            label: "低",
          },
          {
            value: "1",
            label: "中",
          },
          {
            value: "2",
            label: "高",
          },
        ],
        value2: [],
        shareScopeEnd: [],
        optionsArea: [],
        areaIdTwo:''
      };
    },

    created() {
      this.getAreaList()
      this.getTypels();
      this.getList();
    },
    methods: {
      getAreaList() { //查询区域下拉框
        userAreaSelect().then(res => {
          this.optionsArea = res.result
        }).catch(() => {})
      },
      BlurText(e) {
        let boolean = new RegExp("^(?!0)(?:[0-9]{1,4}|10000)$").test(e.target.value);
        if (!boolean) {
          this.$message.error("请输入正整数");
          this.formInline.enterpriseMerchantLimit = "";
        }
      },
      changeInput() {
        this.$forceUpdate(); //修复input不能输入问题
      },
      //获取字典
      getDict() {
        console.log("hahahah");
        var dictType = "industry_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.industryStatusType = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getTypels() {
        //获取行业类型-新
        //shopTypeList
        this.loading = true;
        shopTypeList()
          .then((res) => {
            let ls = [];
            console.log("res.result+++", res.result);
            ls = this.getTreeData(res.result);
            // console.log(this.typeLs)
            let ls1 = ls.map((item) => {
              item.value = item.id;
              item.children.map((items) => {
                items.value = items.id;
              });
              return item;
            });
            console.log("ls1+++", ls1);
            this.typeLs = ls1;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getTreeData(data) {
        // 循环遍历json数据
        for (var i = 0; i < data.length; i++) {
          if (data[i].children.length < 1) {
            // children若为空数组，则将children设为undefined
            //   data[i].children=undefined;
            delete data[i].children;
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      },
      handleChange(value) {
        let _this = this;
        console.log("value+++++++++++++", value[1]);
        _this.filter.shopTypeId = value[1];
      },
      areaIdChange(id){ //区域选择
        console.log(id)
        this.typeLs2value = {}
        this.childShopType = []
        this.getlimitshopTypeList(id)
      },
      getlimitshopTypeList(id) {
        //新增或者编辑时查询店铺行业(一级)
        //shopTypeList
        let params = {
          areaId: id
        }
        this.areaIdTwo = id
        // this.loading = true;
        limitshopTypeList(params)
          .then((res) => {
            this.typeLs2 = res.result;
          })
          .finally(() => {
            // this.loading = false;
          });
      },
      getlimitshopTypeListTow(areaId) {
        //新增或者编辑时查询店铺行业(二级)
        let params = {
          areaId: areaId,
          parentId: this.parentId,
          id: this.limitid
        };
        limitshopTypeList(params)
          .then((res) => {
            this.typeLs3 = res.result;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      parentChange(item) {
        //一级
        console.log(item);
        this.parentId = item.id;
        this.formInline.parentId = item.id;
        this.formInline.parentName = item.value;
        this.childShopType = [];
        this.limitid = ''
        this.getlimitshopTypeListTow(this.areaIdTwo);
      },
      parentChange2(item) {
        //二级
        console.log(item);
        //   this.parentId = item.id
      },
      select(value) {
        console.log("select", value);
      },
      getDetail(id) {
        this.loading2 = true;
        //修改
        //查询发卡限制详情
        this.orType = 2;
        this.titletxt = "修改规模/限额";
        this.centerDialogVisible = true;
        cardlimitDetail(id)
          .then((res) => {
            this.getlimitshopTypeList(res.result.areaId);
            this.formInline = res.result;
            this.limitid = res.result.id;
            this.typeLs2value = res.result.parent;
            this.parentId = res.result.parent.id;
            console.log(this.parentId)
            this.getlimitshopTypeListTow(res.result.areaId);
            this.childShopType = res.result.childShopType;
            console.log(this.childShopType)
            setTimeout(() => {
              this.loading2 = false;
            }, 500);
          })
          .finally(() => {
            this.loading2 = false;
          });
      },
      //列表
      getList() {
        this.loading = true;
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };

        cardlimitLs(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            this.$refs.table.pageOptions.total = total;
            this.tableData = records;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      _handleSuccess() {
        this.getList();
        this.detailDialog = false;
      },
      //重置
      setReset() {
        this.filter.areaId = ''
        this.filter.shopTypeId = ''
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      //搜索
      search() {
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      addCardlimit() {
        //新增发卡限制
        this.typeLs2value = "";
        this.typeLs2 = [];
        this.typeLs3 = [];
        this.formInline = {};
        this.childShopType = [];
        this.orType = 1;
        this.titletxt = "新增发卡限制";
        this.centerDialogVisible = true;
        // this.getlimitshopTypeList();
      },
      mideSumit() {
        //保存
        if(this.formInline.areaId==''||this.formInline.areaId==undefined){
          this.$message.error('请选择管辖区域');
          return
        }
        if (this.orType == 1) {
          var params = {
            ...this.formInline,
            childShopType: this.childShopType,
          };
          addCardlimit(params).then((res) => {
            this.$message({
              message: "新建成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.centerDialogVisible = false;
              this.filter.shopTypeId = "";
              this.pageOptions.pageNum = 1;
              this.$refs.table.pageOptions.pageNum = 1;
              this.getList();
            }, 1000);
          });
        } else {
          var params = {
            ...this.formInline,
            childShopType: this.childShopType,
            parentId: this.formInline.parent.id,
            parentName: this.formInline.parent.value,
          };
          delete params.parent;
          delete params.childName;
          console.log(params);
          updateCardlimit(params).then((res) => {
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.centerDialogVisible = false;
              this.filter.shopTypeId = "";
              this.pageOptions.pageNum = 1;
              this.$refs.table.pageOptions.pageNum = 1;
              this.getList();
            }, 1000);
          });
        }
      },
    },
  };

</script>
<style lang="scss" scoped>
  @import "./style/merchantsList";

  .el-select .el-input {
    width: 130px;
  }

  .first_box {
    ::v-deep :nth-child(1).el-input__inner {
      width: 100px;
    }

    ::v-deep :nth-child(2).el-input__inner {
      width: 200px;
    }
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .main_top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .tip {
    color: #333;
    margin-left: 20px;
  }

  .green {
    color: #11b95c;
  }

  .red {
    color: #e64242;
  }

  .yellow {
    color: #e6a700;
  }

  .dia_detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .dia_detail_l {
    width: 160px;
    text-align: right;
  }

  .dia_detail_r {
    display: flex;
    align-items: center;
  }

</style>
